<template>
  <div class="infinite-list-wrapper" style="overflow: auto">
    <ul
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
    >
      <li v-for="(post,index) in posts" :key="index" style="list-style: none;">
        <div style="width: 500px;">
    <el-card :body-style="{ padding: '0px' }">
      <div class="post-header" style="display: flex; ">
        <div class="post-header-left" style="display: flex; align-items: center; ">
          <el-avatar :src="post.avatar"
            style="margin-right: 10px;" />
          <span style="font-size: 18px;">{{ post.userName}}</span>
        </div>
      
        <el-button v-if="!isSubscribed[index]" type="primary" round style="margin-left: 340px;margin-top: 5px; " @click="subscribe(post,index)">关注</el-button>
        <el-button v-else round style="margin-left: 340px;margin-top: 5px;" @click="unSubscribe(post,index)">已关注</el-button> 
      </div>
      <div class="post-content">
        <div style="padding: 10px;">
          <p>{{ post.title }}</p>
        </div>
      </div>
      <div class="post-picture">
        <button @click="goPost(post)" class="custom-button">
          <img :src="post.picture"
            class="image">
        </button>
      </div>
      <div class="post-operations" style="padding: 15px;position: relative; right: -40px;">
        <el-button v-if="!isUnlike[index]" type="primary" @click="unlike(post,index)">
          <el-icon>
            <Hide />
          </el-icon>
         </el-button>
        <el-button :key="likeflash" type="primary" @click="like(post,index)"><el-icon><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
              xmlns="http://www.w3.org/2000/svg" data-v-746b41f0="">
              <path
                d="M16.0001 30C15.7313 29.9983 15.4722 29.8968 15.2704 29.7142C13.8836 28.4502 10.4494 25.2135 7.935 22.8518L7.72707 22.6574L7.0135 21.9866C5.87916 20.922 4.80993 19.9165 4.42898 19.5626C4.35053 19.4877 4.2684 19.4139 4.1682 19.3273C3.17609 18.4523 2.37941 17.3673 1.8327 16.1463C1.286 14.9254 1.0021 13.5974 1.00051 12.2532C0.987516 10.9904 1.22282 9.73791 1.69239 8.5711C2.13749 7.45328 2.7925 6.43677 3.61987 5.57951C4.38515 4.76751 5.3005 4.12089 6.31215 3.67793C7.3238 3.23497 8.41128 3.00451 9.51077 3C10.7584 3.00603 11.9888 3.3 13.1114 3.85999C14.234 4.41999 15.2202 5.23186 15.9973 6.23584C16.7743 5.23199 17.7603 4.41998 18.8828 3.85999C20.0052 3.30001 21.2355 3.00618 22.4829 3C23.5808 3.00297 24.6669 3.23109 25.6781 3.67081C26.6893 4.11053 27.6051 4.75305 28.372 5.56099C29.1962 6.41583 29.8499 7.4281 30.2965 8.54095C30.7666 9.70799 31.0058 10.9598 30.9999 12.223C31.0045 13.5845 30.7185 14.9303 30.1622 16.1658C29.6059 17.4012 28.7928 18.4962 27.7803 19.3731C26.6374 20.4261 24.8253 22.1285 22.9064 23.9321L22.8563 23.9798L22.0442 24.7429C19.9325 26.7283 17.7517 28.7798 16.7298 29.7151C16.5291 29.8995 16.2692 30.001 16.0001 30V30ZM9.51354 5.31508C8.71021 5.321 7.91618 5.49157 7.17781 5.81712C6.43944 6.14267 5.77174 6.61662 5.21364 7.21096C4.59234 7.85539 4.10031 8.61918 3.76549 9.45886C3.41406 10.34 3.23697 11.2842 3.24462 12.2366C3.24428 13.2474 3.45594 14.2464 3.86542 15.1653C4.2749 16.0841 4.87257 16.9013 5.61727 17.5608C5.69384 17.6259 5.76384 17.6891 5.8319 17.7552L5.8469 17.7678L5.85913 17.7785C5.88101 17.8017 5.90404 17.8239 5.92813 17.8447C6.29679 18.184 7.25168 19.0793 8.6885 20.4337L10.0741 21.7347C12.1887 23.7211 14.5462 25.9359 16.001 27.2854C17.0125 26.3423 18.4863 24.9608 20.5035 23.06C23.1125 20.6021 25.1126 18.7285 26.2885 17.6434L26.3414 17.5948C27.0784 16.9531 27.6746 16.1578 28.0902 15.2614C28.5276 14.3069 28.7535 13.2644 28.7519 12.2093C28.7541 11.2556 28.5739 10.3109 28.2215 9.42872C27.8874 8.59351 27.3974 7.83373 26.7792 7.19245C26.2197 6.60072 25.5512 6.12978 24.8127 5.80691C24.0742 5.48405 23.2805 5.31566 22.4781 5.31199C21.5352 5.31876 20.6067 5.54999 19.7653 5.98755C18.9238 6.42511 18.1923 7.05711 17.628 7.83406C17.4367 8.0897 17.191 8.297 16.9098 8.44007C16.6287 8.58313 16.3195 8.65829 16.0059 8.65963H15.9955C15.6799 8.6587 15.3686 8.5838 15.0853 8.44078C14.8019 8.29776 14.554 8.09027 14.3602 7.83406C13.7958 7.05833 13.0645 6.4274 12.2238 5.9904C11.3831 5.5534 10.4555 5.32233 9.51354 5.31508V5.31508Z"
                fill="white"></path>
            </svg></el-icon>{{post.likes}}</el-button>
            

        <el-button type="primary" @click="goPost(post)"><el-icon>
            <Comment />
          </el-icon >{{ post.replyNum }}</el-button>

            <el-tag style="position: relative; right: -80px;" class="ml-2" type="success">{{ new Date(post.createTime).toLocaleDateString() }}</el-tag>  
    
          
            </div>
    </el-card>
  </div>
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">已经到底啦，刷新发现更多精彩</p>
  </div>
</template>


<script lang="ts" setup>
import axios from 'axios';
import { computed, onUpdated, reactive, ref } from 'vue'
import { onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../router/MyRouter';



let likeflash = ref(0)
const loading = ref(false)
const noMore = computed(() => initIndex.value >= 30)
const disabled = computed(() => loading.value || noMore.value)


let posts:Post[]=reactive([])
let initPosts:Post[]=reactive([])
let initIndex=ref(0)
let initflag=false
let isSubscribed = ref(posts.map(post => post.isSubscribed === 1))

const isUnlike = ref(posts.map(() => true));  //不感兴趣
//const isSubscribed = ref(posts.map(() => true));//是否关注



const load = () => {
  loading.value = true
  setTimeout(() => {
    if(initflag){
          posts=posts.concat(initPosts.slice(initIndex.value,initIndex.value+9))
          initIndex.value+=10
          loading.value = false
          isSubscribed = ref(posts.map(post => post.isSubscribed === 1))
    }
    loading.value = false
    initflag=true
  }, 2000)
}



//刷新会重写挂载的
//在这里查询后台，将展示给用户的帖子拿出来
interface Post {  
  postId: number;  
  userId: number;  
  title: string;  
  perferId:number;
  content:string;
  picture:string;
  hot:number;
  likes:number;
  replyNum:number;
  createTime:string;
  unreadNum:number;
  avatar:string;
  userName:string;
  isSubscribed:number;
}  

//初始化30条帖子数据
onMounted(()=>{
  axios.get('http://localhost:8080/ODP_Project/community/getPosts').then(
    response=>{
      initPosts=response.data.data
      posts=posts.concat(initPosts.slice(initIndex.value,initIndex.value+9))
      initIndex.value+=10
      isSubscribed = ref(posts.map(post => post.isSubscribed === 1))
      console.log(initIndex.value)
      console.log(posts)
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )

})

//点击关注
function subscribe(post:any,index:number){
  axios.put('http://localhost:8080/ODP_Project/community//subscribe/'+post.userId).then(
    response=>{
      console.log(response.data.msg)
      isSubscribed.value[index]=!isSubscribed.value[index]
      ElMessage({
    message: '关注成功.',
    type: 'success',
  })
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//取关
function unSubscribe(post:any,index:number){
  axios.delete('http://localhost:8080/ODP_Project/community/unSubscribe/'+post.userId).then(
    response=>{
      console.log(response.data.msg)
      isSubscribed.value[index]=!isSubscribed.value[index]
      ElMessage({
    message: '取关成功.',
    type: 'success',
  })
    }
    
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//点击不感兴趣，减少推荐
function unlike(post:Post,index:number){
  axios.put('http://localhost:8080/ODP_Project/community/unlike/'+post.perferId).then(
    response=>{
      console.log(response.data.msg)
      post.isSubscribed=0
      ElMessage({
    message: '已为您减少此类别的帖子.',
    type: 'success',
  })
  isUnlike.value[index]=!isUnlike.value[index]
    }
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

//点赞 页面上渲染的点赞数+1
function like(post:any,index:number){
  axios.put('http://localhost:8080/ODP_Project/community/like/post/'+post.postId).then(
    response=>{
      console.log(response.data.msg)
      posts[index].likes++
      likeflash.value++;
      console.log("当前点赞数",posts[index].likes)
      ElMessage({
    message: '点赞成功.',
    type: 'success',
     })
    },
    
  ).catch(
    error=>{
      console.log(error)
    }
  )
}

function goPost(post:any) {
  router.push({
      path:'post',//不要 /post
      query:
      {
        postId:post.postId,
      }})
}

onUpdated(()=>{
  console.log("社区模块更新")
})

</script>


<style scoped>
.custom-button {
  /* 移除button的默认样式 */
  background-color: transparent;
  /* 移除背景色 */
  border: none;
  /* 移除边框 */
  padding: 0;
  /* 移除内边距，根据需要调整 */
  cursor: pointer;
  /* 更改鼠标指针样式为手形，表示可点击 */
  outline: none;
  /* 移除点击时的轮廓线（可选） */
}

.custom-button:hover {
  /* 鼠标悬停时不添加任何边框或背景色 */
  background-color: transparent;
  /* 确保背景色保持透明 */
  border: none;
  /* 确保边框保持无 */
}

.image {
  /* 如果需要，可以对图片设置样式 */
  width: 200px;
  /* 示例宽度 */
  height: auto;
  /* 保持图片比例 */
}





.infinite-list-wrapper {
  height: 500px;
  text-align: center;
  overflow-y: auto;
  /* 允许垂直滚动 */
  -ms-overflow-style: none;
  /* IE 和 Edge */
  scrollbar-width: none;

  /* Firefox */
  /* Chrome, Safari, 和 Opera */
  &::-webkit-scrollbar {
    display: none;
  }
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item+.list-item {
  margin-top: 10px;
}




</style>
